<script setup lang="ts">
import { ref } from "vue";
import { CaretTop, CaretBottom } from "@element-plus/icons-vue";
const props = defineProps({
  bgColor: {
    type: String,
    default: ""
  },
  title: {
    type: String,
    default: ""
  }
});
const hidden = ref(false);
const hideOrShow = () => {
  hidden.value = !hidden.value;
};
</script>

<template>
  <div class="w-full">
    <div class="title w-full bg mb-[20px]">
      <span>{{ title }}</span>
      <span class="up-down" @click="hideOrShow">
        <el-icon v-if="hidden" color="#fff"><CaretTop /></el-icon>
        <el-icon v-if="!hidden" color="#fff"><CaretBottom /></el-icon>
      </span>
    </div>
    <div class="w-full content" :style="{ height: hidden ? '0px' : null }">
      <slot />
    </div>
  </div>
</template>

<!--<style scoped lang="scss">-->
<!--.bg {-->
<!--  /* background-image: linear-gradient(to right, rgba(0, 158, 219, 1), rgba(0, 158, 219, .4), #88b22d); */-->
<!--  background-image: linear-gradient(-->
<!--    to right,-->
<!--    #9EDBFF 0%,-->
<!--    rgba(136, 178, 45, 1) 70%,-->
<!--    #fff 90%,-->
<!--  );-->
<!--}-->
<!--.title {-->
<!--  width: 100%;-->
<!--  height: 40px;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  text-indent: 20px;-->
<!--  position: relative;-->
<!--  color: #fff;-->
<!--  &:after {-->
<!--    content: "";-->
<!--    position: absolute;-->
<!--    width: 4px;-->
<!--    height: 100%;-->
<!--    background: #0a0a0a;-->
<!--    left: 0;-->
<!--    top: 0;-->
<!--  }-->
<!--}-->
<!--</style>-->
<style scoped lang="scss">
.bg {
  background-image: linear-gradient(
    to right,
    rgb(255 255 255 / 60%) 0%,
    transparent
  );
}

.up-down {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  cursor: pointer;
  background-color: #8ff2ff;
  border-radius: 100px;
}

.content {
  overflow: hidden;
}

.title {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  font-weight: bold;
  color: #000;
  text-indent: 20px;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    content: "";
    background-color: #9edbff;
  }
}
</style>
